<template>
  <div class="container">
    <vue-tree :collapseEnabled="false" :config="treeConfig" :dataset="data"
              linkStyle="straight" style="width: 800px; height: 600px; border: 1px solid gray;">
      <template v-slot:node="{ node, collapsed }">
        <div :style="{ border: collapsed ? '2px solid grey' : '' }" class="rich-media-node"
             @click="handleClickNode(node)">
          <span style="padding: 4px 0; font-weight: bold;">
            {{ node.name }}
          </span>
          <span v-if="node.parentId !== 0" style="padding:4px 0;font-weight: bold;">
            {{ node.weight && node.weight * 100 + '%' }}
          </span>
        </div>
      </template>
    </vue-tree>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>当前节点</span>
      </div>
      <el-form ref="formRef" :model="currentNode" label-position='left' label-width="100px">
        <el-form-item label="节点ID" prop="name">
          <el-tag>{{ currentNode.id }}</el-tag>
        </el-form-item>
        <el-form-item label="父节点ID" prop="parentId">
          <el-tag>{{ currentNode.parentId }}</el-tag>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-tag>{{ currentNode.name }}</el-tag>
        </el-form-item>
        <el-form-item v-if="currentNode.parentId !== 0" label="权重" prop="weight">
          <el-tag>{{ currentNode.weight }}</el-tag>
        </el-form-item>
        <el-form-item v-if="!currentNode.leaf" label="算子信息">
        </el-form-item>
        <el-divider v-if="currentNode.operator !== null" border-style="dashed"/>
        <el-form-item v-if="currentNode.operator!==null && currentNode.operator.operatorName!==null"
                      label="算子名称"
                      prop="operatorName">
          <el-tag>
            {{ currentNode.operator !== null ? currentNode.operator.operatorName : "" }}
          </el-tag>
        </el-form-item>
        <el-form-item v-if="currentNode.operator !== null && currentNode.operator.operatorBody!==null"
                      label="算子主体"
                      prop="operator.operatorBody">
          <el-tag>
            {{ currentNode.operator !== null ? currentNode.operator.operatorBody : "" }}
          </el-tag>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {},
      treeConfig: {nodeWidth: 120, nodeHeight: 80, levelHeight: 200},
      currentIndex: 0,
      currentNode: {},
      treeid: 0,
    }
  },
  //mounted页面渲染完毕
  async mounted() {
    const treeId = this.$route.query.treeid
    const res = await this.$http.get(`tree/detail?treeId=${treeId}`)

    if (res.code !== 200) {
      return this.$message.error('获取指标树失败')
    }

    this.data = res.data.root
    this.currentNode = this.data
  },
  methods: {
    async handleClickNode(node) {
      this.currentIndex = node.id
      this.currentNode = node
    }
  },
}
</script>

<style lang="less" scoped>
.container {
  display: flex;
}

.rich-media-node {
  width: 80px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  color: white;
  background-color: #f7c616;
  border-radius: 4px;
}

.box-card {
  width: 500px;
  height: 550px;
}
</style>